<script setup>

import {goCommunity, goPropertdetails,} from "../../tools/go";

</script>

<template>
  <view class="bg">
    <view class="titli">
      <v-icon @click="goCommunity()" class="icon" icon="mdi-chevron-left"></v-icon>
      <h3>我的房屋</h3>
    </view>
  </view>
<!-- 住户信息 -->
  <view class="tenant">
    <h4>住户信息</h4>
  </view>

<!--   xx  -->
  <view class="info w">
  <ul>
    <li class="one">
      <view>
        <h4>格温</h4>
        <text>登录住户(未注册)</text>
      </view>
      <v-icon class="icon" icon="mdi-phone"></v-icon>
    </li>
    <li>
      <text>姓名：格温</text>
    </li>
    <li>
      <text>电话：123672183</text>
    </li>
    <li>
      <text>身份证：12dwadw3672183</text>
    </li>
    <li>
      <text>身份证地址：的感悟i给iu个队伍给</text>
    </li>
  </ul>
  </view>
<!-- 惯量房屋 -->
    <ul class="hous w">
      <li>
        <h4>关联房屋</h4>
        <view class="box" @click="goPropertdetails()">
          <view>
            <v-icon class="icon" icon="mdi-home"></v-icon>
            <text>1号楼-1梯-101</text>
          </view>
          <v-icon class="icon2" icon="mdi-chevron-right"></v-icon>
        </view>
      </li>
      <li>
        <h4>关联车位</h4>
        <view class="box" >
          <view>
            <v-icon class="icon" icon="mdi-home"></v-icon>
            <text>停车场车位510字母车位</text>
          </view>
          <v-icon class="icon2" icon="mdi-chevron-right"></v-icon>
        </view>
      </li>
      <li>
        <h4>关联车辆</h4>
        <view class="box">
          <view class="i">
            <v-icon class="icon" icon="mdi-home"></v-icon>
            <text class="gc">桂C 14331</text>
            <text class="gc">桂C 14331</text>
            <text class="gc">桂C 14331</text>
          </view>
          <v-icon class="icon2" icon="mdi-chevron-right"></v-icon>
        </view>
      </li>
      <view class="k" style="height: 7px"></view>
    </ul>

<!--  //备注-->
  <view class="bz">

        <text>备注</text>
      <v-icon class="icon2" icon="mdi-chevron-right"></v-icon>
  </view>
  <view class="k" style="height: 7px"></view>
</template>

<style scoped lang="scss">

.bz{
  height: 50px;
  width: 95%;
  margin: 5px auto;
  background: #FFFFFF;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px;
}
//2列表
.hous{
  h4{
    color: #000000;
    font-size: 17px;
    font-weight: 400;
    margin: 5px 0;
  }
  li{
    .box{
      .i{
        text{
          display: block;
          width: 100px;
          height: 25px;
          font-size: 14px;
          border-radius: 5px;
          background: #D0E7F7;
          text-align: center;
          line-height: 25px;
        }
        display: flex;
        width: 90%;
        height: 25px;
        margin: 5px 0;
      }

      view{

        display: flex;
        align-items: center;
        text{
          margin-left: 12px;
        }
      }
      padding: 0 12px;
      width: 100%;
      background: #FFFFFF;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); // 四个方向均匀阴影
      border-radius: 12px;
    }
    width: 90%;
    margin:  5px auto;

  }
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 12px;
}
//x信息
.info{
  ul{
    li{
      text{
        color: #cacaca;
        font-size: 15px;
      }
      display: flex;
      width: 67%;
      margin: 5px 0;
    }
    .one{
      .icon{
        margin-right: -33px;
        color: #1CD786;
      }
      view{
        h4{
          font-size: 20px;
          color: #000000;
          font-weight: 400;
        }
        text{
          font-size: 15px;
          color: #cacaca;
          margin-left: 10px;
        }
        display: flex;
        align-items: center;
      }
      width: 95%;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  background: #FFFFFF;
  border-radius: 12px;
}
//住户信息
.tenant{
  h4:before{
    content: "";
    width: 60px;
    height: 10px;
    background: #1CD786;
    border-radius: 12px;
    position: absolute;
    top: 22px;
    left: 5px;
  }
  h4{
    position: relative;
    font-size: 17px;
    color: #000000;
    font-weight: 400;
  }

  width: 100%;
  height: 10vh;
  background: #FFFFFF;
  border-radius: 12px 12px 0 0;
  margin-top: -15px;
  padding: 12px;

}
//标题
.bg{
  .titli {
    h3 {
      color: #000000;
      text-align: center;
      font-weight: 400;
    }
    .icon {
      position: absolute; /* 将 icon 脱离文档流 */
      left: 10px;
      font-size: 30px;
    }
      background: #FFFFFF;
    position: relative; /* 父容器设置为相对定位 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    width: 100%;
    height: 8vh;
  }
  width: 100%;
  height: 25vh;
  background: #FF702E;
}

body{
  background: #F8F8F8;
}
.w{
  width:95%;
  margin: 10px auto;
}
*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
</style>